<template>
  <div id="addressSelect">
    <el-row>
      <el-col :span="span">
        <el-select v-model="addrData.province"
                   :disabled="disabled"
                   placeholder="请选择省"
                   filterable
                   class="width100"
                   @change="getCity(addrData.province,true)"
                   size="small">
          <el-option
            v-for="item in provinceList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="span" v-if="!hideCity">
        <el-select v-model="addrData.city"
                   :disabled="disabled"
                   placeholder="请选择市"
                   class="width100"
                   filterable
                   @change="getArea(addrData.city,true)"
                   size="small">
          <el-option
            v-for="item in cityList"
            :key="item.xzqhszDm"
            :label="item.xzqhmc"
            :value="item.xzqhszDm">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="span" v-if="!hideCity && !hideArea">
        <el-select
          v-model="addrData.district"
          :disabled="disabled"
          placeholder="请选择区"
          class="width100"
          filterable
          @change="postData()"
          size="small">
          <el-option
            v-for="item in areaList"
            :key="item.xzqhszDm"
            :label="item.xzqhmc"
            :value="item.xzqhszDm">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'city',
  data() {
    return {
      provinceList: [],
      cityList: [],
      areaList: []
    }
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    hideCity: { // 隐藏市
      type: Boolean,
      default: false
    },
    hideArea: { // 隐藏区/县
      type: Boolean,
      default: false
    },
    addrData: { // 地址数据
      type: Object,
      default() {
        return {}
      }
    }
  }, // 从父组件接受的数据
  methods: {
    // 获取省
    getProvinceList() {
      this.$http({
        method: 'get',
        url: '/sys/xzqh/queryProvinceList'
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.provinceList = data.provinceList
          this.addrData.district = ''
          this.addrData.city = ''
        }
      })
    },
    // 点击地区获取市
    getCity(xzqhszDm, is) {
      if (is) {
        // 判断是否点击上一级
        this.addrData.district = ''
        this.addrData.city = ''
      }
      this.$http({
        method: 'get',
        params: {'xzqhszDm': xzqhszDm},
        url: '/sys/xzqh/queryXzqhBySjxzqh'
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.cityList = data.xzqhList
        }
      })
      this.postData()
    },
    // 点击城市获取区
    getArea(xzqhszDm, is) {
      if (is) {
        // 判断是否点击上一级
        this.addrData.district = ''
      }
      this.$http({
        method: 'get',
        params: {'xzqhszDm': xzqhszDm},
        url: '/sys/xzqh/queryXzqhBySjxzqh'
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.areaList = data.xzqhList
        }
      })
    },
    // 向父组件传值
    postData() {
      let _this = this
      // let provinceList = this.provinceList
      // let cityList = this.cityList
      // let areaList = this.areaList

      // setTimeout(function () {
      _this.$emit('addrChange', _this.addrData)
      // }, 10)
    }
  },
  mounted() {
    this.getProvinceList()
  },
  watch: {
    // 监听父组件传值的变化
    addrData: {
      handler: function (val, oldval) {
        if (val.province) {
          this.getCity(val.province, false)
        }
        if (val.city) {
          this.getArea(val.city, false)
        }
      },
      immediate: true, // 关键
      deep: true
    }
  },
  computed: {
    span() {
      if (this.hideCity) {
        return 24
      }
      if (this.hideArea) {
        return 12
      }
      return 8
    }
  }
}
</script>
